<template>
  <view>
    <u-sticky>
      <view class="bg-white">
        <u-tabs
          :list="tabList"
          line-color="#8ac7b0"
          :scrollable="false"
          :activeStyle="{
            color: '#8ac7b0',
            transform: 'scale(1.05)',
          }"
          :inactiveStyle="{
            color: '#666',
            transform: 'scale(1)',
          }"
          itemStyle="height: 44px;"
          :current="current"
          @change="change"
        >
        </u-tabs>
      </view>
    </u-sticky>

    <view class="p-12">
      <template v-if="current === 0">
        <view class="p-12 bg-white color-black card-radius">
          <view class="flex u-border-bottom pb-12 justify-between">
            <view class="text-16 text-bold">交易概况</view>
            <view class="text-12 color-gray">数据更新于 今天08:00</view>
          </view>
          <view class="py-12">
            <u-tabs
              :list="timeList"
              line-color="transparent"
              line-height="0"
              :activeStyle="{
                border: '1rpx solid #6acaaf',
                borderRadius: '100rpx',
                fontSize: '24rpx',
                padding: '4rpx 16rpx',
                color: '#8ac7b0',
              }"
              :inactiveStyle="{
                background: '#9e9e9e1c',
                borderRadius: '100rpx',
                padding: '4rpx 16rpx',
                color: '#666',
                fontSize: '24rpx',
              }"
              :itemStyle="{ height: 'fit-content', padding: '0 12rpx' }"
            >
            </u-tabs>
          </view>
          <view class="grid-3 gap-24">
            <view class="py-8">
              <view class="text-12 color-gray">本月交易金额</view>
              <view class="text-24 py-4">188</view>
              <view class="flex items-center">
                <view class="text-14 text-red">+75%</view>
                <u-icon
                  name="question-circle"
                  size="24rpx"
                  color="#333"
                ></u-icon>
              </view>
            </view>
            <view class="py-8">
              <view class="text-12 color-gray">本月交易笔数</view>
              <view class="text-24 py-4">188</view>
              <view class="flex items-center">
                <view class="text-14 text-red">+75%</view>
                <u-icon
                  name="question-circle"
                  size="24rpx"
                  color="#333"
                ></u-icon>
              </view>
            </view>
            <view class="py-8">
              <view class="text-12 color-gray">交易人数</view>
              <view class="text-24 py-4">188</view>
              <view class="flex items-center">
                <view class="text-14 color-black">--</view>
                <u-icon
                  name="question-circle"
                  size="24rpx"
                  color="#333"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>

        <view class="p-12 bg-white color-black card-radius mt-12">
          <view class="flex u-border-bottom pb-12 justify-between">
            <view class="text-16 text-bold">店铺核心指标趋势</view>
          </view>
          <view class="py-12">
            <u-tabs
              :list="storeTimeList"
              line-color="transparent"
              line-height="0"
              :activeStyle="{
                border: '1rpx solid #6acaaf',
                borderRadius: '100rpx',
                fontSize: '24rpx',
                padding: '4rpx 16rpx',
                color: '#8ac7b0',
              }"
              :inactiveStyle="{
                background: '#9e9e9e1c',
                borderRadius: '100rpx',
                padding: '4rpx 16rpx',
                color: '#666',
                fontSize: '24rpx',
              }"
              :itemStyle="{ height: 'fit-content', padding: '0 12rpx' }"
            >
            </u-tabs>
          </view>
          <view class="flex justify-between">
            <view class="color-gray text-14"> 交易金额 </view>
            <view class="w-100">
              <u-subsection
                activeColor="#3dce97"
                :list="list"
                :customStyle="{ height: '48rpx' }"
                mode="subsection"
                :current="curNow"
                @change="sectionChange"
              ></u-subsection>
            </view>
          </view>
          <view class="flex py-12">
            <view class="w-120">
              <view class="text-12 color-gray">均值</view>
              <view class="text-18">0</view>
            </view>
            <view class="w-120">
              <view class="text-12 color-gray">均值</view>
              <view class="text-18">0</view>
            </view>
          </view>
          <view class="h-250">
            <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
          </view>
        </view>
        <!--        <view class="p-12 bg-white color-black card-radius mt-12">-->
        <!--          <view class="flex pb-12 justify-between">-->
        <!--            <view class="text-16 text-bold">远方会员风云榜</view>-->
        <!--          </view>-->
        <!--          <view class="flex">-->
        <!--            <view class="color-primary flex-col items-center py-12 flex-1">-->
        <!--              <view class="text-18">平台会员风云榜</view>-->
        <!--              <view class="text-14 pt-12">TOP50</view>-->
        <!--            </view>-->
        <!--            <view class="color-black flex-col items-center flex-1 pt-12">-->
        <!--              <view class="text-18">好友会员风云榜</view>-->
        <!--              <view class="text-14 pt-12">TOP50</view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->
      </template>
      <template v-else-if="current === 1">
		<view class="p-12 bg-white color-black card-radius">
		  <view class="flex u-border-bottom pb-12 justify-between">
			<view class="text-16 text-bold">客户概况</view>
			<view class="text-12 color-gray">数据更新于 今天08:00</view>
		  </view>
		  <view class="py-12">
			<u-tabs
			  :list="timeList"
			  line-color="transparent"
			  line-height="0"
			  :activeStyle="{
				border: '1rpx solid #6acaaf',
				borderRadius: '100rpx',
				fontSize: '24rpx',
				padding: '4rpx 16rpx',
				color: '#8ac7b0',
			  }"
			  :inactiveStyle="{
				background: '#9e9e9e1c',
				borderRadius: '100rpx',
				padding: '4rpx 16rpx',
				color: '#666',
				fontSize: '24rpx',
			  }"
			  :itemStyle="{ height: 'fit-content', padding: '0 12rpx' }"
			>
			</u-tabs>
		  </view>
		  <view class="grid-3 gap-24">
			<view class="py-8">
			  <view class="text-12 color-gray">今日新增客户数</view>
			  <view class="flex items-center">
				<view class="text-24 py-4">188</view>
				<u-icon
				  name="arrow-right"
				  size="24rpx"
				  color="#333"
				></u-icon>
			  </view>
			</view>
			<view class="py-8">
			  <view class="text-12 color-gray">今日下单客户数据</view>
			  <view class="flex items-center">
				<view class="text-24 py-4">188</view>
				<u-icon
				  name="arrow-right"
				  size="24rpx"
				  color="#333"
				></u-icon>
			  </view>
			</view>
			<view class="py-8">
			  <view class="text-12 color-gray">累计客户总数</view>
			  <view class="flex items-center">
				<view class="text-24 py-4">188</view>
				<u-icon
				  name="arrow-right"
				  size="24rpx"
				  color="#333"
				></u-icon>
			  </view>
			</view>
		  </view>
		</view>

		<view class="p-12 bg-white color-black card-radius mt-12">
		  <view class="flex u-border-bottom pb-12 justify-between">
			<view class="text-16 text-bold">店铺核心指标趋势</view>
		  </view>
		  <view class="py-12">
			<u-tabs
			  :list="storeTimeList"
			  line-color="transparent"
			  line-height="0"
			  :activeStyle="{
				border: '1rpx solid #6acaaf',
				borderRadius: '100rpx',
				fontSize: '24rpx',
				padding: '4rpx 16rpx',
				color: '#8ac7b0',
			  }"
			  :inactiveStyle="{
				background: '#9e9e9e1c',
				borderRadius: '100rpx',
				padding: '4rpx 16rpx',
				color: '#666',
				fontSize: '24rpx',
			  }"
			  :itemStyle="{ height: 'fit-content', padding: '0 12rpx' }"
			>
			</u-tabs>
		  </view>
		  <view class="flex justify-between">
			<view class="color-gray text-14"> 交易金额 </view>
			<view class="w-100">
			  <u-subsection
				activeColor="#3dce97"
				:list="list"
				:customStyle="{ height: '48rpx' }"
				mode="subsection"
				:current="curNow"
				@change="sectionChange"
			  ></u-subsection>
			</view>
		  </view>
		  <view class="flex py-12">
			<view class="w-120">
			  <view class="text-12 color-gray">均值</view>
			  <view class="text-18">0</view>
			</view>
			<view class="w-120">
			  <view class="text-12 color-gray">均值</view>
			  <view class="text-18">0</view>
			</view>
		  </view>
		  <view class="h-250">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		  </view>
		</view>
		
        <view class="p-12 bg-white color-black card-radius">
          <view class="flex pb-12 justify-between">
            <view class="text-16 text-bold">客户动态</view>
            <u-icon
              name="arrow-right"
              size="24rpx"
              color="#666"
              label="查看全部"
              label-color="#666"
              label-pos="left"
              label-size="24rpx"
            ></u-icon>
          </view>
          <view class="py-12 u-border-top" v-for="item in 2">
            <view class="flex justify-between items-center">
              <view class="flex gap-8 text-14 items-center">
                <u-avatar size="48rpx"></u-avatar>
                <view>用户名</view>
                <view>加购了商品</view>
              </view>
              <view class="text-12 color-tip">2021-01-01 09:00:00</view>
            </view>
            <view class="flex gap-8 pt-12 items-center">
              <u-image width="70rpx" height="70rpx"></u-image>
              <view class="text-12 color-gray ellipsis-1">2箱满50水果商品</view>
            </view>
          </view>
        </view>
        <view class="p-12 bg-white color-black card-radius mt-12">
          <view class="flex justify-between">
            <view class="text-16 text-bold">客户分层消费占比</view>
            <u-icon
              name="question-circle"
              size="24rpx"
              color="#666"
              label="数据更新于 09.24"
              label-color="#666"
              label-pos="left"
              label-size="24rpx"
            ></u-icon>
          </view>
          <view class="flex justify-around pt-24">
            <view
              class="ring total-ring flex-col items-center justify-center gap-8"
            >
              <view class="text-18">12</view>
              <view class="text-12 color-tip">总客户数</view>
            </view>
            <view
              class="ring order-ring flex-col items-center justify-center gap-8"
            >
              <view class="text-18">12</view>
              <view class="text-12 color-tip">90天下单客户数</view>
            </view>
          </view>
        </view>
      </template>
      <view class="p-12 bg-white color-black card-radius" v-else>
        <view class="bg-white color-black card-radius">
          <view class="flex u-border-bottom pb-12 justify-between">
        	<view class="text-16 text-bold">店铺商品概况</view>
        	<view class="text-12 color-gray">数据更新于 今天08:00</view>
          </view>
          <view class="py-12">
        	<u-tabs
			  line-color="#8ac7b0"
        	  :list="goodsDataList"
			  :inactiveStyle="{
				color: '#666',
			  }"
			  :current="currentGoodsData"
			  @change="goodsDataChange"
        	>
        	</u-tabs>
			<view>
				<template v-if="currentGoodsData === 0">
				  <view class="mt-12 flex order-sub-card">
				    <u-image width="140rpx" src="https://images.shejidaren.com/wp-content/uploads/2022/10/68426-1.png" height="140rpx"></u-image>
				    <view class="pl-12 flex-col justify-between color-black">
				      <view>
				        <view class="ellipsis-1 text-12"> 5包减少5元 牛肉 </view>
				        <view class="ellipsis-1 text-12 color-gray"> 牛肉丸200g/袋</view>
				      </view>
				      <view class="text-10 flex red-tip-tag">
				        <view class="bg-red">返现</view>
				        <view class="px-2">￥5.83</view>
				      </view>
				    </view>
				  </view>
				</template>
				<template v-if="currentGoodsData === 1">
				  <view class="mt-12 flex order-sub-card">
				    <u-image width="140rpx" height="140rpx"></u-image>
				    <view class="pl-12 flex-col justify-between color-black">
				      <view>
				        <view class="ellipsis-1 text-12"> 5包减少5元 牛肉 </view>
				        <view class="ellipsis-1 text-12 color-gray"> 牛肉丸200g/袋</view>
				      </view>
				      <view class="text-10 flex red-tip-tag">
				        <view class="bg-red">返现</view>
				        <view class="px-2">￥5.83</view>
				      </view>
				    </view>
				  </view>
				</template>
				<template v-if="currentGoodsData === 2">
				  <view class="mt-12 flex order-sub-card">
					<u-image width="140rpx" src="https://images.shejidaren.com/wp-content/uploads/2022/10/68426-1.png" height="140rpx"></u-image>
				    <view class="pl-12 flex-col justify-between color-black">
				      <view>
				        <view class="ellipsis-1 text-12"> 5包减少5元 牛肉 </view>
				        <view class="ellipsis-1 text-12 color-gray"> 牛肉丸200g/袋</view>
				      </view>
				      <view class="text-10 flex red-tip-tag">
				        <view class="bg-red">返现</view>
				        <view class="px-2">￥5.83</view>
				      </view>
				    </view>
				  </view>
				</template>
			</view>
          </view>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
	  currentGoodsData: 0,
      chartData: {},
      list: ["日", "周", "月"],
      curNow: 0,
      tabList: [
        { name: "店铺概览" },
        { name: "客户管理" },
        { name: "商品分析" },
      ],
      timeList: [
        { name: "今日" },
        { name: "昨日" },
        { name: "近七天" },
        { name: "本月" },
        { name: "上月" },
        { name: "今年" },
      ],
	  goodsDataList: [
	    { name: "销量榜" },
	    { name: "金额榜" },
	    { name: "复购榜" },
	    { name: "首单榜" },
	  ],
      storeTimeList: [
        { name: "近七天" },
        { name: "本月" },
        { name: "上月" },
        { name: "今年" },
      ],
      opts: {
        color: ["#91CB74"],
        padding: [15, 10, 0, 0],
        enableScroll: false,
        legend: {
          show: false,
        },
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
          },
        },
      },
    };
  },
  methods: {
    change({ index }) {
      this.current = index;
    },
	goodsDataChange({ index }) {
	  this.currentGoodsData = index;
	},
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [
            {
              name: "成交量A",

              data: [35, 8, 25, 37, 4, 20],
            },
          ],
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  },
  onReady() {
    this.getServerData();
  },
  onLoad(option) {
    const { type } = option;
    this.current = type - 0;
  },
};
</script>
<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
	
.order-sub-card {
	background: #f5f5f5;
	padding: 20rpx;
	border-radius: 24rpx;
}
.card-radius {
  border-radius: 12rpx;
}
.ring {
  box-sizing: border-box;
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
}
.total-ring {
  border: 34rpx solid #47cbab;
}
.order-ring {
  border: 34rpx solid #53bb7a;
}
</style>
